<template>
	<div>
		<div ref="chartRef" class="w-full h-full"></div>
	</div>
</template>

<script setup lang="ts">
import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
import * as echarts from 'echarts';
import { useEventListener } from '/@/hooks/event/useEventListener';
const chartRef = ref();
let resizeFnSource = resize;
let removeResizeFn = () => {};
let instance: any;
resizeFnSource = useDebounceFn(resize, 200);
const setOptions = () => {
	instance = echarts.init(chartRef.value);
	const option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b} : {c} ({d}%)',
		},
		series: [
			{
				name: 'Nightingale Chart',
				type: 'pie',
				radius: ['10%', '80%'],
				center: ['50%', '50%'],
				roseType: 'area',
				itemStyle: {
					borderRadius: 5,
				},
				label: {
					show: true,
					position: 'outer',
					alignTo: 'none',
					bleedMargin: 5,
					fontSize: 8,
					color: '#fff',
					formatter(param: any) {
						return param.name + ':' + param.percent + '%';
					},
				},
				labelLine: {
					length: 4,
					length2: 4,
					smooth: true,
				},
				data: [
					{ value: 40, name: 'O₃' },
					{ value: 38, name: 'CO' },
					{ value: 32, name: 'SO₂' },
					{ value: 30, name: 'NO₂' },
					{ value: 28, name: 'PM10' },
					{ value: 26, name: 'PM2.5' },
				],
			},
		],
	};
	instance.setOption(option);
	const { removeEvent } = useEventListener({
		el: window,
		name: 'resize',
		listener: resizeFnSource,
	});
	removeResizeFn = removeEvent;
};
function resize() {
	const config = {
		animation: {
			duration: 300,
			easing: 'quadraticIn',
		},
	};
	instance.resize(config);
}
onMounted(() => {
	setOptions();
});

tryOnUnmounted(() => {
	removeResizeFn();
});
</script>

<style lang="scss" scoped></style>
